<template>
  <div class="pager-container">
    <div class="pager-container-inner">
      <bs-form form-type="query" :model="queryForm">
        <bs-form-item label="开始时间">
          <el-date-picker :disabled-date="disabledDateStart" v-model="queryForm.start_time" value-format="YYYY-MM-DD" placeholder="请选择开始时间"></el-date-picker>
        </bs-form-item>
        <bs-form-item label="结束时间">
          <el-date-picker :disabled-date="disabledDateEnd" v-model="queryForm.end_time" value-format="YYYY-MM-DD" placeholder="请选择开始时间"></el-date-picker>
        </bs-form-item>
        <bs-form-item label="设备IP">
          <bs-input placeholder="请输入关键字" v-model="queryForm.admin_server"></bs-input>
        </bs-form-item>
        <bs-form-item class="form-item-btns">
          <el-button type="primary" @click="handleSearch()">查询</el-button>
          <el-button @click="handleReset()">重置</el-button>
        </bs-form-item>
      </bs-form>
      <div class="table-content">
        <bs-table ref="tableRef" :get-data="getList" :columns="columns" :data="tableData"></bs-table>
      </div>
    </div>
  </div>
  <PlayerDialog ref="playRef" />
</template>
<script setup lang="ts">
import {reactive, h, ref, onMounted} from 'vue'
import * as API from '@/service/modules/resource'
import BsTable from '@/components/table/BsTable.vue'
import {delEmptyProp} from '@/utils'
import PlayerDialog from './components/login-log/PlayerDialog.vue'

const tableRef = ref()
const playRef = ref()
const queryForm = reactive<Record<string, string>>({
  start_time: '',
  end_time: '',
  admin_server: ''
})
const tableData = ref<any[]>([])

const columns:ColumnItem[] = [
  {
    type: 'expand',
    prop: 'expand',
    renderExpand: (row) => {
      return h('pre', {style: 'min-height: 80px; line-height: 1.5;'}, row.admin_record_cmds)
    }
  },
  {
    label: '用户',
    prop: 'admin_login_user'
  },
  {
    label: '设备地址',
    prop: 'admin_server'
  },
  {
    label: '链接模式',
    prop: 'admin_record_mode'
  },
  {
    label: '远程地址',
    prop: 'admin_remote_ip'
  },
  {
    label: '开始时间',
    prop: 'admin_start_time'
  },
  {
    label: '登录时间',
    prop: 'admin_login_status_time'
  },
  {
    label: '操作',
    prop: 'actions',
    bodyOptions: {
      type: 'button',
      bind (row, _index) {          
        return {
          buttons: [{
            text: '新版回放',
            onClick: () => {
              playRef.value.open(`/media/${row.admin_record_file}`)
            
            }
          }]
        }
      }
    }
  }
]

const disabledDateStart = (date:Date) => {
  if (queryForm.end_time) {
    return date.getTime() > new Date(queryForm.end_time).getTime()
  }
  return false
}

const disabledDateEnd = (date:Date) => {
  if (queryForm.start_time) {
    return date.getTime() < new Date(queryForm.start_time).getTime() - 24 * 60 * 60 * 1000
  }
  return false
}

const getList = async (tableParams:TableDataParam) => {
  const params = {
    page: tableParams.currentPage,
    limit: tableParams.limit,
    ...delEmptyProp(queryForm)
  }
  const res:any = await API.getLoginRecords(params)
  tableData.value = res.results
  return {
    total: res.count
  }
}

const handleReset = () => {
  for (let key in queryForm) {
    queryForm[key] = ''
  }
  handleSearch()
}

const handleSearch = () => {
  tableRef.value.queryData()
}

onMounted(() => {
  handleSearch()
})

</script>
<style lang="scss" scoped>
</style>
